$(document).ready(function () {
    search();
    statisticPicture();
});

//柱状统计图
function statisticPicture() {
    var myhar = echarts.init(document.getElementById("gradeStatistic"));
    var option = {
        title: {
            text: '个人成绩统计',
            subtext: '等级判定：0-59 不及格， 60-75 及格， 76-85 良好， 86-100 优秀',
            x: 'center'
        },
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: fields,  //横坐标值
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],

        /*纵坐标最小为0，最大为400，分为10段*/
        yAxis: [
            {
                //   type: 'value'
                scale: true,
                power: 1,
                precision: 1,
                splitNumber: 5,
                min: 0,
                max: 100
            }
        ],
        series: [
            {
                name: '学生分数',
                type: 'bar',
                barWidth: '30%',
                data: grades //滑动显示数量
            }
        ]
    };
    myhar.setOption(option);
}

function search() {
    $.ajax({
        type: "POST",
        url: "List",
        data: {},
        dataType: "json",
        success: function (data) {
            var str = "";
            if (data.length > 0) {
                jQuery.each(data, function (i, item) {
                    var index = i + 1;
                    str += "<tr class=\"warning\">";
                    str += "<td>" + index + "</td>";
                    str += "<td>" + item.user.userName + "</td>";
                    str += "<td>" + item.field.fieldName + "</td>";
                    str += "<td>" + item.grade + "</td>";
                    str += "<td>" + item.rank.rankName + "</td>";
                    str += "<td>" + item.createTime + "</td>";
                    str += "</tr>";
                    $("#tablist").html(str);
                });
            }
            else {
                $("#tablist").html("");
            }
            //执行分页函数,
            $(function () {
                //设置页数按钮所在的层,
                $("div.holder").jPages({
                    //显示数据所在的块的ID
                    containerID: "tablist",
                    first: '首页',
                    last: '尾页',
                    previous: '上页',
                    next: '下页',
                    //每页显示数据为多少行
                    perPage: 4,
                    //起始页
                    startPage: 1,
                    //开始页码为2个
                    startRange: 1,
                    //最多显示几个页码页码,其余用..代替
                    midRange: 4,
                    //结束页码为1个
                    endRange: 1,
                    //数据显示的动画效果
                    animation: 'wobble',
                    keyBrowse: true
                });
            });
        },
        error: function (XMLHttpRequest, textStatus) {
            //   alert(XMLHttpRequest.status);
            //    alert(XMLHttpRequest.readyState);
            //    alert(textStatus);
            layer.alert("数据读取错误!");
        }
    });
}